<template>
  <div>
    <m-table :data="tableList" :selection="true" ref="couponList">
      <template v-slot:header="{ row }">
        <div style="width:100%">
          <span style="margin-right:50px">商品ID：{{ row.name }}</span>
          <span style="margin-right:50px">创建时间：{{ row.createTime }}</span>
        </div>
      </template>
      <m-table-column label="商品" width="300">
        <template v-slot="{ row }">
          <div style="display:flex">
            <CouponType :coupon="row"></CouponType>
            <div class="couponTent">
              <div style="margin-bottom:10px">
                {{ row.productType === 0 ? "全店商品" : "指定商品" }}
              </div>
              <div v-if="row.couponType === 1">
                {{ row.discount }}折,无门槛使用
              </div>
              <div v-if="row.couponType === 2">
                {{ row.discountAmount }}元,无门槛使用
              </div>
              <div v-if="row.couponType === 3">
                {{ row.discount }}折,满{{ row.conditionAmount }}元使用
              </div>
              <div v-if="row.couponType === 4">
                {{ row.discountAmount }}元,满{{ row.conditionAmount }}元使用
              </div>
            </div>
          </div>
        </template>
      </m-table-column>
      <m-table-column label="有效期" width="180">
        <template v-slot="{ row }">
          <div class="middleCenter">
            <div class="box--coupon__date">
              <div v-if="row.effectiveDays > 0">
                领取后{{ row.effectiveDays }}天内有效
              </div>
              <div v-else>
                <span class="box--coupon__start">{{
                  row.effectiveStartTime
                }}</span>
                <span>-</span>
                <span class="box--coupon__end">{{ row.effectiveEndTime }}</span>
              </div>
            </div>
          </div>
        </template>
      </m-table-column>
      <m-table-column label="积分价">
        <template v-slot="{ row }">
          <div class="middleCenter">{{ row.integral }}</div>
        </template>
      </m-table-column>
      <m-table-column label="发行量(张)">
        <template v-slot="{ row }">
          <div class="middleCenter">{{ row.issueQuantity }}</div>
        </template>
      </m-table-column>
      <m-table-column label="状态">
        <template v-slot="{ row }">
          <div class="middleCenter">
            <div class="upDown">
              <span
                class="upDown--goodUp"
                :style="{
                  'background-color': row.status === 2 ? '#626C72' : '#5CB95C',
                }"
                >{{ row.status === 2 ? "已下架" : "已上架" }}</span
              >|
              <span class="upDown--goodDown" @click="changeStatus(row)">{{
                row.status === 2 ? "上架" : "下架"
              }}</span>
            </div>
          </div>
        </template>
      </m-table-column>
      <m-table-column label="操作">
        <template v-slot="{ row }">
          <div class="middleCenter">
            <set-drop
              setName="编辑"
              :dropdownList="dropdownCoupList"
              @setClick="editGoods(row)"
              @command="handleCommand($event, row)"
            />
          </div>
        </template>
      </m-table-column>
    </m-table>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import CouponType from "../../common/CouponType.vue";
import { offCoupons, delCoupons } from "@/api/couponActivity/coupon";
import SetDrop from "@/views/customer/common/SetDrop.vue";

@Component({
  components: {
    CouponType,
    SetDrop,
  },
})
export default class ProductList extends Vue {
  @Prop({
    type: Array,
    default() {
      return [];
    },
  })
  couponTable: any;

  @Watch("couponTable")
  getCouponDetail() {
    this.getCoupon();
  }

  tableList = [];

  /** 编辑下拉 */
  dropdownCoupList = [
    {
      text: "删除",
      show: true,
      command: "1",
    },
  ];

  getCoupon() {
    this.tableList = JSON.parse(JSON.stringify(this.couponTable));
    this.tableList.forEach(item => {
      item.effectiveStartTime = item.effectiveStartTime.replace(/-/g, ".");
      item.effectiveEndTime = item.effectiveEndTime.replace(/-/g, ".");
    });
  }

  /**
   * 上下架商品
   */
  changeStatus(item) {
    if (item.startTime) {
      const now = Date.now();
      const end = Date.parse(item.endTime);
      if (end < now && item.status === 2) {
        this.$message("优惠券结束需大于当前时间，请重新编辑优惠券");
        return;
      }
    }
    const id = [];
    id.push(item.id);
    offCoupons(item.status === 2 ? 1 : 2, id).then(res => {
      if (res.code === 200) {
        this.$message.success(`优惠券已${item.status === 2 ? "上架" : "下架"}`);
        this.$parent.getList();
      }
    });
  }

  /** 编辑 */
  editGoods(item) {
    this.$router.push({ name: "IssueCouponAdd", params: { id: item.id } });
  }

  /** 编辑下拉 */
  handleCommand(e, item) {
    this.$confirm("确认删除选中优惠券吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      const ids = [];
      ids.push(item.id);
      delCoupons(ids, {}).then(res => {
        if (res.code === 200) {
          this.$message.success("删除成功");
          this.$parent.getList();
        }
      });
    });
  }
}
</script>

<style lang="scss" scoped>
@include b(setClassify) {
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  @include e(del) {
    width: 55px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  @include e(drop) {
    width: 40px;
    height: 30px;
    border: 1px solid #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
}

.couponTent {
  font-weight: bold;
  margin-left: 15px;
  font-size: 10px;
  margin-top: 10px;
}

.middleCenter {
  @include flex(center, center);
}

.upDown {
  display: flex;
  align-items: center;
  justify-content: center;
  &--goodUp {
    display: flex;
    width: 40px;
    height: 20px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    color: white;
    margin-right: 10px;
  }
  &--goodDown {
    margin-left: 10px;
    color: #2d8cf0;
    cursor: pointer;
  }
}
</style>
